<template>
    <div style="height:auto;overflow-y: auto;background-color: #2D3A64">
		<!-- <el-aside :width="isCollapse?'64px':'200px'" >
			  <div class="toggle-button" @click="toggleCollapse">|||</div> -->
        <el-menu :unique-opened="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            background-color=" #2D3A64" text-color=" #67A3D3" active-text-color="#ffd04b"  :collapse="isCollapse">
            <div v-show="!isCollapse" style="display:flex;align-items:center;color:white;height: 50px;font-size: 18px;cursor: pointer;"
                @click="toHome">
                <i class="el-icon-s-home" style="margin-left:12%;color:  #67A3D3;"></i>
                <span  style="margin-left:3%;color: #67A3D3 ;">首页</span>
            </div>
            <el-submenu :index="index.toString()" v-for="(item,index) in sidebar" :key="index">
                <template slot="title">
                    <i :class="item.icon" style="color:  #67A3D3;"></i>
                    <span>{{item.fname}}</span>
                </template>
                <el-menu-item-group v-for="(items,indexs) in item.manageFunctionList" :key="indexs">
                    <el-menu-item style="display:flex;align-items:center;" :index="indexs.toString()+index"
                        @click="next(items.routePath)">
                        {{items.fname}}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
		<!-- </el-aside> -->
        <!-- <el-row style="height:100vh;width:100%;">
            <el-col :span="12" style="height:100%;width:100%">
                
            </el-col>
        </el-row> -->
    </div>
</template>

<script>
    export default {
        name: "app",
        props:{
			'menuComponents':{
				type:Array
			},
			isCollapse:{
				type:Boolean,
				default:""
			}
		},
        data() {
            return {
                sidebar: [{}],
				
            }
        },
        methods: {
			toggleCollapse () {
			      this.isCollapse = !this.isCollapse
			    },
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            },
            next(routePath) {
                if (this.$route.path != routePath) {
                    this.$router.push(routePath)
                }

            },
            toHome() {
                this.$router.push('/home')
            }
        },
        created() {
            let vm = this
            if (this.$route.path === '/') {//是登录直接出去
                return;
            }
            this.$api.findByManageUserIdManageFunction().then((res) => {
                if (res.state == 'success') {
                    vm.sidebar = res.data
                    // vm.sidebar.forEach(item => {
                    //     item.manageFunctionList.forEach(i => {
                    //         if (i.routePath === vm.$route.path) {
                    //             vm.defaultActive = JSON.stringify(i.id)
                    //         }
                    //     });
                    // });
                }
            })
        }
    }
</script>
<style scoped lang="less">
    html,
    body,
    #app {
        margin: 0px;
        padding: 0px;
        height: 100%;
    }
	
	
    .el-menu {
        border: none !important;
        background: transparent;
        border-right:none !important;
    }
    /deep/.el-menu--inline {
        text-align: center !important;
        border-right:none !important;
        // background: rgba(241, 248, 255, 1);
    }
</style>